<template>
	<view class="container">

		<!-- 族谱信息展示区 -->
		<view class="genealogy-info">
			<image src="/static/family_portraits.jpeg" mode="widthFix"></image>
			<view class="info-content">
				<view class="info-content-left">
					<text class="title">{{genealogyInfo.genealogyName}}</text>
					<text class="subtitle" v-if="genealogyInfo.isExample"><text class="example">示例族谱</text></text>
					<view class="details">
						<text>联络人：{{genealogyInfo.contactPerson}}</text>
						<text>根地区：{{genealogyInfo.rootRegion}}</text>
						<text>修订时间：{{genealogyInfo.updateTime}}</text>
					</view>
				</view>
				<view class="info-content-right" @click="navigationToIndex">
					<image src="/static/book.jpeg" mode="aspectFit"></image>
					<view class="genealogy-item-title">查看族谱</view>
				</view>
			</view>
		</view>

		<!-- 家族成员信息 -->
		<view class="family-members">
			<view class="family-members-item">
				<text class="members-count">家族成员</text>
				<text class="count">{{genealogyInfo.membersCount}}人</text>
			</view>
			<button class="invite">邀请加入</button>
			<button class="import">添加成员</button>
			<button class="red-list">家族红榜</button>
		</view>

		<!-- 族谱介绍 -->
		<view class="introduction">
			<text class="intro-title">介绍：</text>
			<text class="intro-content">
				{{genealogyInfo.introduction}}
			</text>
		</view>

		<view class="family-rules-regulations">
			<text class="intro-title">家训：</text>
			<text class="intro-content">
				{{genealogyInfo.familyTraining}}
			</text>
			<br /><br />
			<text class="intro-title">家规：</text>
			<text class="intro-content">
				{{genealogyInfo.familyRules}}
			</text>
		</view>

		<!-- 底部操作区 -->
		<view class="bottom-actions">
			<button class="edit" @click="editGenealogy">编辑族谱</button>
			<!-- <button class="manage">管理家族</button> -->
		</view>
	</view>
</template>


<script>
	import {
		getGenealogy
	} from '@/api/record/genealogy.js'
	export default {
		data() {
			return {
				genealogyInfo: {
					isExample: true,
					genealogyName: '杨氏族谱',
					isExample: true,
					contactPerson: '杨*明',
					rootRegion: '北京市东城区',
					updateTime: '2024-09-24 09:24',
					membersCount: 8,
					introduction: `
          杨氏源远流长，源于上古时期的轩辕氏后裔，历经数千年的发展和演变，形成了众多的郡望和堂号，如开封杨氏、邯郸杨氏等家族。一些杨姓人士是因为历史原因而改姓的。例如，在唐朝时期，高句丽臣服于唐朝，并在唐朝的帮助下联合新罗灭掉了百济。在这期间，很多人为了彰显自己的靠山身份，改姓为杨。
        `,
					familyRules: '',
					familyTraining: ''

				}
			};
		},
		onLoad(event) {
			// 加载原始数据
			if (event.genealogyId) {
				getGenealogy(event.genealogyId).then(response => {
					if (response.data == undefined) {
						return;
					}
					this.genealogyInfo = response.data
					console.log(response)
				});
			}
			console.log(event.genealogyId)
		},
		onShow() {
		  if (this.genealogyInfo.genealogyId) {
		    getGenealogy(this.genealogyInfo.genealogyId).then(response => {
		      if (response.data) {
		        this.genealogyInfo = response.data;
		      }
		    });
		  }
		},
		methods: {
			navigationToIndex() {
				// 创建族谱的逻辑
				uni.navigateTo({
					url: '/pages/package/genealogy/genealogy?genealogyId=' + this.genealogyInfo.genealogyId
				});
			},
			viewTree() {
				// 查看树谱的逻辑
				uni.navigateTo({
					url: '/pages/view-tree/view-tree'
				});
			},
			inviteJoin() {
				// 邀请加入的逻辑
				uni.showToast({
					title: '邀请加入',
					icon: 'none'
				});
			},
			importMembers() {
				// 导入成员的逻辑
				uni.showToast({
					title: '导入成员',
					icon: 'none'
				});
			},
			showRedList() {
				// 显示家族红榜的逻辑
				uni.showToast({
					title: '家族红榜',
					icon: 'none'
				});
			},
			editGenealogy() {
				// 编辑族谱的逻辑
				uni.navigateTo({
					url: '/pages/package/genealogy/edit?genealogyId=' + this.genealogyInfo.genealogyId
				});
			},
			manageFamily() {
				// 管理家族的逻辑
				uni.navigateTo({
					url: '/pages/manage-family/manage-family'
				});
			}
		}
	};
</script>


<style>
	.container {
		padding: 20px;
	}

	.genealogy-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20px;
	}

	.genealogy-info image {
		width: 100%;
	}

	.info-content {
		display: flex;
		width: 100%;
	}

	.info-content-left {
		flex: 5;
	}

	.info-content-right {
		display: flex;
		position: relative;
		align-items: center;
		flex: 2;
	}

	.info-content-right image {
		width: 100px;
		height: 138px;
	}

	.genealogy-item-title {
		writing-mode: vertical-rl;
		text-orientation: upright;
		position: absolute;
		left: 69px;
		z-index: 10;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.subtitle {
		font-size: 16px;
		margin: 0 15px;
	}

	.example {
		background-color: orange;
		color: white;
		padding: 2px 5px;
		border-radius: 5px;
	}

	.details text {
		display: block;
		margin: 5px 0;
	}

	.family-members {
		display: flex;
		align-items: center;
		margin: 20px 0;
	}

	.family-members-item {
		display: flex;
		flex-direction: column;
		align-items: left;
		flex: 25%;
	}

	.members-count {
		font-size: 16px;
	}

	.count {
		color: red;
	}

	.invite,
	.import,
	.red-list {
		font-size: 12px;
		margin-left: 10px;
		padding: 5px 15px;
		border-radius: 8px;
		border-width: 5px;
	}

	.introduction {
		background-color: #f0f8ff;
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.family-rules-regulations {
		padding: 20px;
		background-color: #f0f8ff;
		display: flex;
		flex-direction: column;
	}

	.intro-title {
		font-weight: bold;
	}

	.intro-content {
		margin-top: 10px;
	}

	.bottom-actions {
		display: flex;
		justify-content: space-around;
		position: sticky;
		bottom: 10px;
	}

	.edit,
	.manage {
		padding: 0px 55px;
		border-radius: 25px;
		color: white;
		font-size: 16px;
		width: 98%;
	}

	.edit {
		background-color: #4a7efe;
	}

	.manage {
		background-color: #8b4513;
	}
</style>